<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue指令</title>
</head>
<body>
    
    <div id="app">

        <!-- https://cn.vuejs.org/v2/api/#v-text -->
        
        
        <!-- v-text -->
        <br>
        <span v-text="msg1"></span>
        <br>
        <span>{{msg1}}</span>


        <!-- v-once 标记，只会更改一次 -->
        <br>{{msg1}}
        <br>
        <span v-once>这个不会改变: {{msg1}}</span>

        <!-- v-html 标记，是html内容 -->
        <br>
        <span>html: {{rawHtml}}</span>
        <br>
        <span v-html="rawHtml"></span>

        <!-- 控制显示隐藏 -->
        <br>
        <h5 v-show="showme">能看到“v-show”？</h5>
        <br>
        <h5 v-if="ifme">能看到“v-if”？</h5>


        <!-- 条件语句 -->
        <br>
        <div v-if="vif"> 能看到vif </div>
        <div v-else-if="velseif"> 能看到v-else-if</div>
        <div v-else>能看到velse</div>

        <!-- 还能用for，更多参考：https://cn.vuejs.org/v2/guide/list.html -->
        <br>
        <ul>
            <li v-for="item in items">
                {{item.message}}
            </li>
        </ul>
        <br>
        <ul>
            <li v-for="(item, i) in items">
                {{itemsTitle}} : {{i}} : "{{item.message}}"
            </li>
        </ul>

        <!-- v-on 监听事件 -->
        <br><button v-on:click="dothis">do this</button>
        <br><button @click="dothis">缩写do this</button>
        <br><button v-on:keyup.enter="onenter">回车键</button>
        <br><button v-on:keyup.13="onenter">回车键，编码是13</button>
        <br><input @keyup.alt.67="clear">Alt + C</input>
        <br><button v-on:click.once="clickonce">只能点击一次（修饰符once）</button>

        <br><button @click="domore('a', $event)">do more a</button>
        <br><button @click.ctrl="domore('b', $event)">do more b</button>
        <br><button @click.shift="domore('b', $event)">do more b</button>
        <br><button @click.alt="domore('b', $event)">do more b</button>
        <br><button @click.meta="domore('b', $event)">do more b</button>

        <br><button @click.ctrl.exact="domore('c', $event)">do more c</button>
        
        <br><div @click.capture="onparent">
            <label @click="onchild">
                    父节点处理完毕后，子节点才处理
            </label>
            </div>

        <br><div @click="onparent1">
            <label @click.self.stop="onchild1">
                onchild1 接受事件
            </label>
            <br>
            <label @click.self="onchild2">
                    onchild2 接受事件
            </label>
        </div>

        <br><div @click="onparent">
                <label @click="onchild">
                        父节点处理完毕后，子节点才处理
                        <label @click.stop="onchild">
                                父节点处理完毕后，子节点才处理
                        </label>
                </label>
                <br>
                <label @click.capture="onchild">
                        父节点处理完毕后，子节点才处理
                        <label @click.stop="onchild">
                                父节点处理完毕后，子节点才处理
                        </label>
                </label>
                </div>

        <br><div @click.prevent.self="onparent">
                <label @click="onchild">
                        父节点处理完毕后，子节点才处理
                        <label @click="onchild">
                                父节点处理完毕后，子节点才处理
                        </label>
                </label>
                <br>
                </div>
        <br><div v-bind:class="[activeClass, errorClass]">
            绑定class用法，用变量控制
        </div>
        <br><div v-bind:class="{ active: isActive, 'error': hasError }">
            绑定class用法2，用变量控制
        </div>
        <br><div v-bind:class="classObject">
            绑定class用法3，绑定一个对象
        </div>
        <br><div v-bind:class="classObject2">
            绑定class用法4，用computed，绑定函数
        </div>

    </div>
    
    <style>
    .active {
        background-color: aqua;
    }
    .error {
        color: red;
    }
    </style>
    
    <script src="../lib/vue.min.js"></script>
    <script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg1: 1,
            rawHtml: '<span style="color:red">红色文字</span>',
            showme: false,
            ifme: false,
            vif:false,
            velseif:false,
            items: [
                {message:"item1 msg"},
                {message:"item2 msg"},
            ],
            itemsTitle: "forexample",
            activeClass: "active",
            errorClass: "error",
            isActive: true,
            hasError: true,
            classObject: {
                active: true,
                error: true,
            },
        },
        computed: {
            classObject2: function(){
                return {                    
                active: true,
                error: true,
                }
            },
        },
        methods: {
            dothis: function(e) {
                console.log("do this!", e);
            },
            onenter: function(e) {
                console.log("on enter.", e);
            },
            clickonce: function(e) {
                console.log("click once.");
            },
            domore: function(msg, e) {
                console.log("do more", msg, e);
            },
            onparent: function() {
                console.log("parent");
            },
            onchild: function() {
                console.log("child");
            },
            onparent1: function() {
                console.log("parent1");
            },
            onchild1: function() {
                console.log("onchild1");
            },
            onchild2: function() {
                console.log("onchild2");
            }
        },
    })

    setTimeout(()=>{
        vm.vif = true
    }, 1000)
    setTimeout(()=>{
        vm.vif = false
        vm.velseif = true
    }, 2000)

    setTimeout(() => {
        vm.msg1 = 2
    }, 1000 * 2);

    setTimeout(() => {
        vm.msg1 = 3
        vm.showme = true
        vm.ifme = true
        console.log(vm.$data.msg1, vm.msg1)
        
        vm.$data.msg1 = 4
        console.log(vm.$data.msg1, vm.msg1)
    }, 1000 * 3);
    </script>
</body>
</html>